<template>
  <view class="send-apply">
    <view class="_apply-info">
      <view class="_apply-person">
        <view class="_person-avatar">
          <image class="_avatar-img" src="@/static/img/chat/pic.jpg"></image>
        </view>
        <view class="_person-info">
          <view class="_info-content">
            <text class="_info-content-name">王彪</text>
            <text class="_info-content-job multi-line"
              >南京年余冷冻食品有限公司总经理</text
            >
          </view>
          <view class="_info-active"><text>1天前活跃</text></view>
        </view>
      </view>

      <view class="_apply-tips"><text>添加验证信息（通过率更高）</text></view>

      <view class="_apply-content">
        <up-textarea
          v-model="applyContent"
          placeholder="请输入验证信息"
          height="320"
        ></up-textarea>
      </view>

      <view class="_send-btn">
        <text>发送</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

const applyContent = ref("Hi,我是邹晓，很高兴认识你");
</script>

<style lang="scss" scoped>
.send-apply {
  width: 100%;

  ._apply-info {
    width: 100%;
    padding: 32rpx 28rpx;
    box-sizing: border-box;

    ._apply-person {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      ._person-avatar {
        width: 120rpx;
        height: 120rpx;

        ._avatar-img {
          width: 100%;
          height: 100%;
          border-radius: 8rpx;
        }
      }

      ._person-info {
        width: calc(100% - 148rpx);
        margin-left: 28rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;

        ._info-content {
          display: flex;
          justify-content: flex-start;

          ._info-content-name {
            font-weight: 500;
            font-size: 30rpx;
            color: #1c1c1c;
            min-width: max-content;
          }

          ._info-content-job {
            margin-left: 22rpx;
            font-weight: 500;
            font-size: 24rpx;
            color: #5a5a5a;
            line-height: 46rpx;
          }
        }

        ._info-active {
          font-size: 26rpx;
          font-weight: 500;
          color: #1872ff;
          margin-top: 8rpx;
        }
      }
    }

    ._apply-tips {
      font-size: 32rpx;
      font-weight: 500;
      color: #1c1c1c;
      margin-top: 52rpx;
    }

    ._apply-content {
      width: 100%;
      height: 320rpx;
      margin-top: 24rpx;
      display: flex;

      ::v-deep .u-textarea {
        border-radius: 20rpx !important;
        background-color: #f5f6fa !important;

        .u-textarea__field {
          color: #1c1c1c;
        }
      }
    }

    ._send-btn {
      width: 428rpx;
      height: 84rpx;
      background-color: #1872ff;
      border-radius: 20rpx;
      font-size: 36rpx;
      text-align: center;
      color: #ffffff;
      font-weight: 500;
      line-height: 84rpx;
      margin: 40rpx auto;
    }
  }
}
</style>
